import { Avatar, Badge, Col, Row, Typography } from "antd"

export const AppointmentDetails = (props) => {
   let selectedAppointment=props.data;
  
   // 状态标签样式映射
   const statusTagMap = {
     booked: <Badge status="default" text="已预约" />,
     confirmed: <Badge status="processing" text="待确认" />,
     ongoing: <Badge status="processing" text="进行中" />,
     completed: <Badge status="success" text="已完成" />,
     cancelled: <Badge status="error" text="已取消" />
   };
    return <>
        <div  style={{ marginTop: 16 }}>
            <Row gutter={[16, 16]}>
                <Col xs={24} sm={12}>
                    <Typography.Title level={5}>预约信息</Typography.Title>
                    <dl style={{ margin: 0 }}>
                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold' }}>预约编号:</dt>
                        <dd style={{ marginLeft: 80 }}>{selectedAppointment.id}</dd>

                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold', marginTop: 8 }}>预约日期:</dt>
                        <dd style={{ marginLeft: 80, marginTop: 8 }}>{selectedAppointment.date}</dd>

                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold', marginTop: 8 }}>预约时间:</dt>
                        <dd style={{ marginLeft: 80, marginTop: 8 }}>{selectedAppointment.time}</dd>

                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold', marginTop: 8 }}>理疗项目:</dt>
                        <dd style={{ marginLeft: 80, marginTop: 8 }}>{selectedAppointment.service}</dd>

                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold', marginTop: 8 }}>负责员工:</dt>
                        <dd style={{ marginLeft: 80, marginTop: 8 }}>{selectedAppointment.doctor}</dd>

                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold', marginTop: 8 }}>费用:</dt>
                        <dd style={{ marginLeft: 80, marginTop: 8 }}>¥{selectedAppointment.price}</dd>

                        <dt style={{ float: 'left', width: 80, fontWeight: 'bold', marginTop: 8 }}>状态:</dt>
                        <dd style={{ marginLeft: 80, marginTop: 8 }}>
                            {statusTagMap[selectedAppointment.status]}
                        </dd>
                    </dl>
                </Col>

                <Col xs={24} sm={12}>
                    <Typography.Title level={5}>客户信息</Typography.Title>
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                        <Avatar
                            src={selectedAppointment.customer.avatar}
                            alt={selectedAppointment.customer.name}
                            size={64}
                        />
                        <div style={{ marginLeft: 16 }}>
                            <Typography.Title level={4} style={{ margin: 0 }}>
                                {selectedAppointment.customer.name}
                            </Typography.Title>
                            <Typography.Text>
                                {selectedAppointment.customer.phone}
                            </Typography.Text>
                        </div>
                    </div>

                    <Typography.Title level={5}>备注信息</Typography.Title>
                    <Typography.Paragraph>
                        客户为首次到店，主要症状为肩颈酸痛，需要进行专业推拿按摩缓解。
                    </Typography.Paragraph>
                </Col>
            </Row>
        </div>
    </>
}